<template>
  <div class="from">
    <a-modal v-model:visible="show" title="编辑" @ok="handleOk">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
          >确认</a-button
        >
      </template>
      <fromEdit v-if="show" ref="formEdit" :msg="message"></fromEdit>
    </a-modal>

    <table border="1">
      <tr>
        <th>字段名称</th>
        <th>字段类型</th>
        <th>是否必填</th>
        <th>字段选项</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in state.fromItem" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.type }}</td>
        <td>{{ item.must }}</td>
        <td>{{ item.choose }}</td>
        <td><a-button @click="edit(item)">编辑</a-button></td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import fromEdit from "./formEdit.vue";

let show = ref(false);
let message = ref({});
const loading = ref(false);
const formEdit = ref(null) 
let state = reactive({
  fromItem: [
    { id:"111", name: "字段一", type: "单行文本", must: "是", choose: "无" },
    { id:"222", name: "字段二", type: "日期", must: "否", choose: "年-月-日" },
    { id:"333",name: "字段三", type: "单选下拉", must: "否", choose: "选项一，选项二" },
  ],
});

const edit = (item) => {
  console.log(item);
  show.value = true;
  message.value = item
  console.log(message);
};
const handleOk = () => {
  // console.log(e);
 for(let i = 0; i < state.fromItem.length; i++) {
   console.log(state.fromItem[i]);
   if(state.fromItem[i].id == formEdit.value.formState.id){
      console.log(formEdit.value.formState);
     state.fromItem[i].name = formEdit.value.formState.name
     state.fromItem[i].type = formEdit.value.formState.optionsValue
     state.fromItem[i].must =  formEdit.value.formState.type
     if(state.fromItem[i].type == '日期') {
       state.fromItem[i].choose = formEdit.value.formState.resource
     }else {
       state.fromItem[i].choose = formEdit.value.formState.desc
     }
   }
 }
   show.value = false;
};

const handleCancel = () => {
  show.value = false;
};
</script>

<style>
</style>